<template>
    <div class="my_header">

<div class="left">
    <van-icon name="wap-nav" size="22" />
</div>
<div class="content">
    <div :class="{active:currentTag === 1}" @click="handleClick(1)">我的</div>
    <div :class="{active:currentTag === 2}" @click="handleClick(2)">发现</div>
    <div :class="{active:currentTag === 3}" @click="handleClick(3)">云村</div>
    <div :class="{active:currentTag === 4}" @click="handleClick(4)">视频</div>
</div>
<div class="right">
    <van-icon name="search"  size="22"/>
</div>
    </div>
</template>
<script setup>
import { ref } from "vue";
import router from "@/router/index.js";
let currentTag = ref(2)
const handleClick = (tag)=>{
console.log(tag);
currentTag.value = tag
router.push({name:tag===1?'mine': tag===2?'discovery': tag===3?'yuncun': 'video'})
}
</script>
<style scoped>
.my_header{
    display: flex;
    justify-content: space-between;

}
.my_header .content{
    display: flex;
    width: 180px;
    justify-content: space-around
}
</style>